<template>
    <div class="dialog">
        <!-- 语义化 -->
        <header>
            <!-- <h3>友情提示</h3> -->
            <slot></slot>
        </header>
        <main>
            <!-- <p>{{ msg }}</p> -->
            <!-- slot插槽，作用：提前占位，将来写在父组件标签内的结构，就会替换这个标签 -->
            <slot>
                <!-- slot标签中也可以写默认的内容，只会在父组件使用时，没有提供内容的时候被渲染 -->
                <h4>我是后备内容~~~~</h4>
            </slot>
        </main>
        <footer>
            <!-- <button>关闭</button> -->
            <slot></slot>
        </footer>
    </div>
</template>

<script>
// 使用插槽 
//  1. 子组件中使用slot占位，把不希望写死的地方用slot占位
//  2. 在父组件中使用带有插槽slot组件的时候，组件标签之间传入结构
export default {
    props:{
        msg:String
    }
}
</script>

<style lang="less">
.dialog{
    width: 300px;
    height: 200px;
    border: 2px solid skyblue;
    margin: 50px auto;
    padding: 20px;
}
</style>